<template>
  <div class="code-box">
    <div class="code-left">
      <div style="border-bottom: 1px solid #333;">页面1</div>
      <div>
        <el-input v-model="addText" />
        <el-button @click="add">存储</el-button>
      </div>
      <div style="border-bottom: 1px solid #333;">页面2</div>
      <div>
        <el-input v-model="text" />
        <el-button @click="check">查看</el-button>
      </div>
    </div>
    <div class="code-right">
      <mavon-editor class="markdown-body" codeStyle="monokai" v-html="codeData"
        :externalLink="externalLink"></mavon-editor>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'
export default {
  name: 'CodeVuex',
  data() {
    return {
      externalLink: {
        markdown_css: function () {
          // 这是你的markdown css文件路径
          return "/mavon-editor/markdown/github-markdown.min.css";
        },
        hljs_js: function () {
          // 这是你的hljs文件路径
          return "/mavon-editor/highlightjs/highlight.min.js";
        },
        hljs_css: function (css) {
          // 这是你的代码高亮配色文件路径
          return "/mavon-editor/highlightjs/styles/" + css + ".min.css";
        },
        hljs_lang: function (lang) {
          // 这是你的代码高亮语言解析路径
          return "/mavon-editor/highlightjs/languages/" + lang + ".min.js";
        },
        katex_css: function () {
          // 这是你的katex配色方案路径路径
          return "/mavon-editor/katex/katex.min.css";
        },
        katex_js: function () {
          // 这是你的katex.js路径
          return "/mavon-editor/katex/katex.min.js";
        },
      },
      addText: '',
      text: '',
    }
  },
  props: {
    codeData: {
      type: String,
    },
  },
  mounted() { },
  created() { },
  methods: {
    ...mapMutations(['setText']),
    ...mapGetters(['getText']),
    add() {
      this.setText(this.addText)
      this.$message.success('存储成功！')
    },
    check() {
      this.text = this.getText()
    },
  },
}
</script>

<style lang='scss' scoped>
.code-left {
  div:nth-child(n) {
    margin-top: 20px;
  }

  div:nth-child(1) {
    margin-top: 0px;
  }

  div {
    display: flex;
  }
}
</style>